<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <style>
        .row > div {
            border: 1px solid lightgrey;
            padding: 10px;
            background-color: aliceblue;
            margin: 5px 0;
        }
    </style>
  </head>
  <body class="m-2">
      <h3>Grid Layout</h3>
      <div class="container">
          <!-- 每行定义12列 -->
          <div class="row">
              <div class="col-1">1</div>
              <div class="col-1">1</div>
              <div class="col-2">2</div>
              <div class="col-2">2</div>
              <div class="col-6">6</div>
          </div>
          <div class="row">
              <div class="col-3">3</div>
              <div class="col-4">4</div>
              <div class="col-5">5</div>
          </div>
          <div class="row">
              <div class="col-6">6</div>
              <div class="col-6">6</div>
          </div>
          <div class="row">
              <div class="col-11">11</div>
              <div class="col-1">1</div>
          </div>
          <div class="row">
              <div class="col-12">12</div>
          </div>
      </div>
  </body>
</html>
